<style lang="scss" scoped>
.order {
  .btn {
    margin-left: 140px;
  }
  .pdf-btn {
    margin: -20px 0 0 14px;
  }
}
</style>
<template>
  <div class="order">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button
        type="danger"
        icon="el-icon-download"
        size="small"
        round
        @click="importVisible = true"
      >
        导入文件
      </el-button>
    </el-row>
    <!-- 导入 -->
    <upload-com
      title="导入订单"
      :visibleProp="importVisible"
      @close="importVisible = false"
      @success="importVisible = false"
    />
    <!-- 预览 -->
    <pdf-com
      :src="pdfSrc"
      :title="pdfTitle"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
      v-if="pdfSrc"
    >
      <template>
        <el-form :inline="false" label-width="80px" v-if="pdfType === 1">
          <el-form-item label="提单号">
            <el-input v-model="form.ladingNo" />
          </el-form-item>
          <el-form-item label="柜号">
            <el-input v-model="form.cabinetNo" />
          </el-form-item>
          <el-form-item label="封条号">
            <el-input v-model="form.sealNo" placeholder="请输入封条号" />
          </el-form-item>
        </el-form>
        <el-form :inline="false" label-width="80px" v-if="pdfType === 2">
          <el-form-item label="报关单号">
            <el-input v-model="form.declarationNo" />
          </el-form-item>
          <el-form-item label="申报日期">
            <el-date-picker
              v-model="form.declareDate"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-form>
        <el-form :inline="false" label-width="80px" v-if="pdfType === 3">
          <el-form-item label="关税税号">
            <el-input type="text" v-model="form.tariffNo" />
          </el-form-item>
        </el-form>
        <el-form :inline="false" label-width="90px" v-if="pdfType === 4">
          <el-form-item label="增值税税号">
            <el-input v-model="form.vatNo" />
          </el-form-item>
        </el-form>
        <el-row>
          <el-button @click="prev" :disabled="pdfType === 1">上一张</el-button>
          <el-button @click="next" :disabled="pdfType === 4">下一张</el-button>
          <el-button @click="pdfVisible = false">完成</el-button>
        </el-row>
      </template>
    </pdf-com>
    <!-- 查询 -->
    <el-form
      ref="form"
      :model="form"
      label-width="165px"
      :rules="rules"
      class="query-form"
    >
      <el-row type="flex" class="width-auto">
        <el-tag type="success">
          <i class="el-icon-right" />
          基本资料
        </el-tag>
        <el-form-item label="商品" label-width="80px">
          <el-row type="flex">
             <el-select v-model="form.goodsSaveType">
              <el-option label="新鲜" value="0" />
              <el-option label="冷冻" value="1" />
            </el-select>
            <el-input v-model="form.goodsProductCountry" />
            <el-input v-model="form.goodsName" />
            <el-button class="ml_10" size="small" type="text" @click="showPdf(form.ladingFileUrl, 1, '提运单(03)')">提运单(03)</el-button>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="货品税号">
          <el-input v-model="form.goodsTaxNo" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="产地证号码">
          <el-input v-model="form.goodsProductNo" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="关税">
          <el-input v-model="form.tariff" />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="增值税">
          <el-input v-model="form.addValueTax" />
        </el-form-item>
        <el-button class="pdf-btn" type="text" @click="showPdf(form.ladingFileUrl, 1, '提运单(03)')">提运单(03)</el-button>
      </el-row>
      <el-row>
        <el-form-item label="税票申报方式" prop="cabinetNo">
          <el-input v-model="form.taxDeclareType" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="入境口岸">
          <el-input v-model="form.entryGate" />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="许可证编号">
          <el-input v-model="form.licenseNo" />
        </el-form-item>
        <el-button class="pdf-btn" type="text" @click="showPdf(form.declarationFileUrl, 2, '报关单')">报关单</el-button>
      </el-row>
      <el-row type="flex">
        <el-form-item label="关税金额">
          <el-input v-model="form.tariffAmount" />
        </el-form-item>
        <el-button class="pdf-btn" type="text" @click="showPdf(form.tariffFileUrl, 3, '关税税单')">关税税单</el-button>
      </el-row>
      <el-row type="flex">
        <el-form-item label="增值税完税金额">
          <el-input v-model="form.payAddValueTaxAmount" />
        </el-form-item>
        <el-button class="pdf-btn" type="text" @click="showPdf(form.vatNoFileUrl, 4, '增值税税单')">增值税税单</el-button>
      </el-row>
      <el-row type="flex">
        <el-form-item label="增值税金额">
          <el-input v-model="form.addValueTaxAmount" />
        </el-form-item>
      </el-row>
      <el-row class="btn">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="$router.push(`/step/company?id=${$route.query.id}`)">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import UploadCom from '@/components/UploadCom.vue'
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'Goods',
  components: {
    UploadCom,
    PdfCom
  },
  data() {
    return {
      form: {
        goodsSaveType: '',
        goodsProductCountry: '',
        goodsName: '',
        goodsTaxNo: '',
        goodsProductNo: '',
        tariff: '',
        addValueTax: '',
        taxDeclareType: '',
        entryGate: '',
        licenseNo: '',
        tariffAmount: '',
        payAddValueTaxAmount: '',
        addValueTaxAmount: ''
      },
      pdfSrc: '',
      importVisible: false,
      pdfVisible: false,
      pdfType: 1,
      pdfTitle: '',
      rules: {
        ladingNo: { required: true, message: '请输入提单号', trigger: 'blur' },
        cabinetNo: { required: true, message: '请输入柜号', trigger: 'blur' }
      }
    }
  },
  methods: {
    showPdf(src, type, title) {
      this.pdfSrc = src
      console.log(this.pdfSrc)
      this.pdfType = type
      this.pdfTitle = title
      if (this.pdfSrc) this.pdfVisible = true
    },
    prev() {
      this.pdfType -= 1
      if (this.pdfType === 1) return
    },
    next() {
      this.pdfType += 1
      if (this.pdfType === 4) return
    },
    onSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { ladingNo, cabinetNo, sealNo, tariffNo, declareDate, vatNo } =
            this.form
          const { code } = await this.$axios.post('/order/saveOrderBaseInfo', {
            ladingNo,
            cabinetNo,
            sealNo,
            tariffNo,
            declareDate,
            vatNo
          })
          if (code === '000000') {
            this.$message('修改成功！')
          }
        }
      })
    }
  },
  async created() {
    const { data } = await this.$axios.post('/order/queryOrderGoodsInfo', {
      cabinetNo: this.$route.query.id
    })
    console.log(data)
    this.form = data || {}
  }
}
</script>
